<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=f, initial-scale=1.0">
    <meta name="description"
    content="福建师范大学宿舍报修系统-覆盖范围包括全校宿舍，同学们可以在网站上宿舍报修!" />
    <meta name="keywords" content="福建师范大学宿舍报修系统" />
    <title>福建师范大学宿舍报修</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css" type="text/css">
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <script>
        function $(id){
            return document.getElementById(id);
        }
        function change1(){
            $("photo").src="img/eating1.jpg";
        }
        function change2(){
            $("photo").src="img/eating2.jpg";
        }
        function change3(){
            $("photo").src="img/eating3.jpg";
        }
        function change4(){
            $("photo").src="img/eating4.jpg";
        }
        function change5(){
            $("photo").src="img/eating5.jpg";
        }
        function change6(){
            $("photo").src="img/eating6.jpg";
        }
        window.addEventListener('load', function () {
        var navs = document.querySelectorAll('.nav-con-list-item');
        var lists = document.querySelectorAll('.list');
        for (var i = 0; i < lists.length; i++) {
            lists[i].previousElementSibling.setAttribute('data-index', i);
        }
        for (var i = 0; i < navs.length; i++) {
            var index = navs[i].getAttribute('data-index');
            if (index != null) {
                navs[i].addEventListener('mouseover', function () {
                    this.nextElementSibling.style.display = 'block';
                })
                navs[i].addEventListener('mouseout', function () {
                    this.nextElementSibling.style.display = 'none';
                })
            }
        }
    })
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (target == obj.offsetLeft) {
                clearInterval(obj.timer);
                callback && callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15)
    }
    window.addEventListener('load', function () {
        var title_lists = document.querySelectorAll('.title-lists');
        var newcons = document.querySelectorAll('.newcon');
        for (var i = 0; i < title_lists.length; i++) {
            title_lists[i].setAttribute('data-index-title', i);
            title_lists[i].addEventListener('mouseover', function () {
                for (var i = 0; i < title_lists.length; i++) {
                    title_lists[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = '#e87b1c';
                var index = this.getAttribute('data-index-title');
                for (var i = 0; i < newcons.length; i++) {
                    newcons[i].style.display = 'none';
                }
                newcons[index].style.display = 'block';
            })
        }
        var focus = document.querySelector('.focus');
        var ul = focus.querySelector('ul');
        var ol = focus.querySelector('ol');
        var focusWidth = focus.offsetWidth;
        for (var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            li.setAttribute('data-index-li', i);
            ol.appendChild(li);
            ol.children[i].addEventListener('click', function () {
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('data-index-li');
                animate(ul, -index * focusWidth);
                num = circle = index;
            })
        }
        ol.children[0].className = 'current';
        var btn = document.querySelector('.btn');
        var num = 0;
        var circle = 0;
        var flag = true;
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
        btn.addEventListener('click', function () {
            if (flag) {
                flag = false;
                if (num == ul.children.length - 1) {
                    num = 0;
                    ul.style.left = 0;
                }
                num++;
                animate(ul, -num * focusWidth, function () {
                    flag = true;
                });
                circle++;
                circle = circle == ol.children.length ? 0 : circle;
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'current';
            }
        
        })
        var timer = setInterval(function () {
            btn.click();
        }, 2000)
        focus.addEventListener('mouseenter', function () {
            clearInterval(timer);
            timer = null;
        })
        focus.addEventListener('mouseleave', function () {
            timer = setInterval(function () {
                btn.click();
            }, 2000)
        })
    })
    </script>
</head>
<body>
    <div class="tq"><span class="tq_txt"></span> 
        <script language="JavaScript" type="text/JavaScript">
			var day="";
			var month="";
			var ampm="";
			var ampmhour="";
			var myweekday="";
			var year="";
			mydate=new Date();
			myweekday=mydate.getDay();
			mymonth=mydate.getMonth()+1;
			myday= mydate.getDate();
			myyear= mydate.getYear();
			year=(myyear > 200) ? myyear : 1900 + myyear;
			if(myweekday == 0)
			weekday=" 星期日 ";
			else if(myweekday == 1)
			weekday=" 星期一 ";
			else if(myweekday == 2)
			weekday=" 星期二 ";
			else if(myweekday == 3)
			weekday=" 星期三 ";
			else if(myweekday == 4)
			weekday=" 星期四 ";
			else if(myweekday == 5)
			weekday=" 星期五 ";
			else if(myweekday == 6)
			weekday=" 星期六 ";
			document.write(year+"年"+mymonth+"月"+myday+"日 "+weekday);
		</script>
        <div class="register">
            <a href="register.html">登录</a>&nbsp;&nbsp;<a href="#">忘记密码</a>
        </div> 
    </div>
    <div class="header">
        <div class="pic w1">
            <img src="img/logo.png" alt="" class="logo">
            <form action="">
                <div class="search">
                    <a href=""><img src="img/search.png" alt="" class="search_pic"></a>
                    <input type="text" class="se" placeholder="Search...">
                </div>
            </form>
        </div>
        <div class="nav">
            <div class="navbox w">
                <ul>
                    <li><a href="#">首页</a>
                    <li><a href="ser.html">后勤概况</a>
                        <ul>
                            <li><a href="ser.html#intro">后勤简介</a></li>
                            <li><a href="#">机构设置</a></li>
                        </ul>
                    </li>
                    <li><a href="direction.html">服务指南</a></li>
                    <li><a href="register.html">学生公寓</a></li>
                    <li><a href="rule.html">规章制度</a></li>
                    <li><a href="notice.html">通知公告</a>
                        <ul>
                            <li><a href="notice.html#no">通知</a></li>
                            <li><a href="notice.html#at">公告</a></li>
                        </ul>
                    </li>
                    <li><a href="#">常用下载</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="picture">
        <div class="focus w">
            <a href="javascript:;" class="btn" style="display: none;">11</a>
            <ul>
                <li>
                    <a href="#">
                        <img src="img/p1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/p2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/p3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/p4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/p5.jpg" alt="">
                    </a>
                </li>
            </ul>
            <div class="banner-bottom">
                <ol>
    
                </ol>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="biaoti">
            <span class="lt1"><img src="img/xiaohui.png" alt="" width="50px" height="50px"></span>
            <span class="lt2"><a href="#">福建师范大学学生公寓</a></span>
            <span class="rt1"><a href="register.html">我的宿舍</a></span>
        </div>
        <div class="announcement">
            <div class="announcement-top">
                <span class="lt3">宿舍公告</span>
                <span class="rt2"><a href="#">更多</a></span>
            </div>
            <div class="announcement-content">
                <div class="announcement-content-lt">
                    <ul class="announcement-content-lt-ul">
                        <li><a href="#">报修办法</a></li>
                        <li><a href="#">后勤常用电话</a></li>
                        <li><a href="#">文明宿舍评比</a></li>
                        <li><a href="#">宿舍违纪处罚</a></li>
                        <li><a href="#">宿舍门禁授权流程</a></li>
                        <li><a href="#">学生宿舍住宿服务</a></li>
                        <li><a href="#">宿舍用电超负荷跳闸恢复送电申请</a></li>
                        <li><a href="#">宿舍调换或退宿后重新申请入住办理</a></li>
                    </ul>
                </div>
                <div class="announcement-content-rt">
                    <h4>文明宿舍展示</h4>
                    <ul class="announcement-content-rt-ul">
                        <li><img src="img/sushep1.png" ><h5>兰12-519</h5></li>
                        <li><img src="img/sushep2.jpg" ><h5>兰12-519</h5></li>
                        <li><img src="img/sushep3.jpg" ><h5>兰12-519</h5></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="eating">
        <h3>师大风景</h3>
        <ul>
            <img src="img/eating1.jpg" alt="" id="photo">
            <li class="eatingp1" onmouseover="change1()"><a href="#">星雨湖</a></li>
            <li class="eatingp2" onmouseover="change2()"><a href="#">又玄图书馆</a></li>
            <li class="eatingp3" onmouseover="change3()"><a href="#">钟楼</a></li>
            <li class="eatingp4" onmouseover="change4()"><a href="#">文化街</a></li>
            <li class="eatingp5" onmouseover="change5()"><a href="#">教学楼</a></li>
            <li class="eatingp6" onmouseover="change6()"><a href="#">旗山大道</a></li>
        </ul>
    </div>

    <div class="wrapper">
        <div class="typing-demo">
            Welcome to Fujian Normal University，here all your wishes here can come true.
        </div>
      </div>  


    <div class="con">
            
        <ul class="img_list_item clearfix">
          
            <li class="i2">
                <a href="#" >
                  <img src="img/s1.jpg" alt="" />
                </a>
                <h1><a href='#' title='身临其境'>身临其境</a></h1>
              </li>
          
            <li class="i2">
              <a href="#" >
                <img src="img/s2.jpg" alt="" />
              </a>
              <h1><a href='#' title='宿说青春'>宿说青春</a></h1>
            </li>
          
            <li class="i3">
              <a href="#">
                <img src="img/s3.jpg" alt="" />
              </a>
              <h1><a href='#'title='乐享生活'>乐享生活</a></h1>
            </li>
          
            <li class="i4">
              <a href="#" target="_blank">
                <img src="img/s4.jpg" alt="" />
              </a>
              <h1><a href='#' title='长安葱葱'>长安葱葱</a></h1>
            </li>
          
            <li class="i5">
              <a href="#" >
                <img src="img/s5.jpg" alt="" />
              </a>
              <h1><a href='#' title='美好食光'>美好食光</a></h1>
            </li>
          
            <li class="i6">
              <a href="#" target="_blank">
                <img src="img/s6.jpg" alt="" />
              </a>
              <h1><a href='#' title='勤中有情'>勤中有情</a></h1>
            </li>
          
        </ul>
      
    </div>
    <div class="footer">
        <div id="footerlogo"><img src="img/foot_logo.png" ></div>
        <div class="word">
            <p>
                版权所有&copy;&nbsp;&nbsp;2021&nbsp;&nbsp;福建师范大学后勤管理处All&nbsp;Rights&nbsp;Reserved&nbsp;闽ICP备05000146号
            </p>
            <p>
                通信地址：&nbsp;福建省福州市大学城学府南路8号福建师范大学旗山校区 &nbsp;邮编：350117
            </p>
        </div>
    </div>
</body>
</html>